.emotional-map-body {
  padding: 18px 24px;
  height: auto;
  background-color: #f0f2f5;

  .breadcrumb-content {
    box-sizing: border-box;
    margin: 0 0 18px 0;
    line-height: 1.5715rem;
    font-size: 14px;
    padding: 12px;
    background-color: #fff;
  }

  .emotional-content {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;

    .header-control-bar {
      padding: 18px 12px;
      background-color: #fff;

      .header-control-row {
        display: flex;
        width: 100%;

        .header-control-row-left {
          width: 34%;
          text-align: left;
          flex: 0 1 auto;
          display: flex;

          .header-control-row-title {
            flex: 0 1 auto;

            span {
              margin-bottom: 0;
              color: #262626;
              font-weight: 600;
              font-size: 20px;
              line-height: 40px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .header-control-detail-tabs {
            position: relative;
            top: 4px;
            flex: 0 1 auto;
            margin-left: 56px;
            line-height: 22px;

            a {
              margin: 0;
              padding: 0 22px;
              color: #262626;
              font-size: 14px;
              line-height: 30px;
              border: 1px solid #d9d9d9;
              cursor: pointer;
              display: inline-block;
              border-radius: 4px;
              background-color: #f0f2f5;

              &:first-child {
                margin-right: 24px;
              }
            }

            .active {
              border-color: #ff9900;
              background-color: #ff9900;
              color: #ffffff;
            }
          }
        }

        .header-control-row-detail {
          flex: 0 1 auto;
          width: 100%;
          display: flex;
		  margin-left: 7%;
          justify-content: right;

          .header-control-detail-search-bar {
            zoom: 1;
            white-space: nowrap;
            display: flex;
            flex-wrap: wrap;
            place-items: center;

            .header-control-detail-item {
              flex: 0 1 auto;
              margin-right: 12px;
            }
          }
        }
      }
    }

    .emotional-row {
      width: 100%;
      height: 100%;

      .emotional-child {
        width: 100%;

        .box-title {
          margin-bottom: 0;
          color: #262626;
          font-weight: 600;
          font-size: 20px;
          line-height: 40px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: left;
        }

        // 个人页面
        .product-item {
          padding: 0;
          margin-bottom: 24px;

          .product-box {
            margin-bottom: 24px;
            background-color: #fff;
            padding: 14px 24px;

            ul {
              display: flex;
              flex-wrap: nowrap;
              margin-left: -12px;
              margin-right: -12px;

              &::before {
                display: table;
                content: '';
              }

              &:after {
                display: table;
                clear: both;
                content: '';
              }

              li {
                flex: 0 1 20%;
                padding: 0 12px;

                .product-box-wrap {
                  border-radius: 4px;
                  padding-bottom: 24px;
                  background-image: url("../../assets/images/bgbox.png");
                  background-size: 100% 100%;

                  .product-box-title {
                    color: #ffffff;
                    font-size: 18px;
                    font-weight: 600;
                    padding: 8px 14px;
                    text-align: left;
                    margin-bottom: 24px;
                    width: 74px;
                    background-color: #ff9900;
                    border-radius: 4px;
                  }

                  .box-detail {
                    display: grid;
                    grid-gap: 10px;
                    grid-template-columns: repeat(2, 1fr);
                    place-items: center;

                    .box-detail-item {
                      img {
                        margin-right: 4px;
                        display: inline-block;
                      }
                    }

                    p {
                      vertical-align: middle;
                      display: inline-block;

                      span {
                        font-size: 18px;
                        font-weight: bold;
                      }
                    }
                  }
                }
              }
            }
          }

          .product-chart-item {
            padding: 0;

            .personal-label-view-title {
              text-align: center;

              p {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 4px;
              }

              span {
                font-size: 14px;
                color: #595959;
              }
            }

            .personal-label-view-wrap {
              background-color: #fff;

              #personalLabelEchart,
              #blEchart,
              #syLabelEchart,
              #tjLabelEchart,
              #tdLabelEchart {
                margin: 0 auto;
              }

              .chart-legend {
                position: absolute;
                width: 260px;
                display: flex;
                flex-wrap: wrap;
                right: 24px;
                top: 10px;

                .chart-legend-item {
                  flex: 1 1 auto;
                  margin: 0 5px;

                  img,
                  p {
                    display: inline-block;
                    vertical-align: middle;
                  }

                  p {
                    margin-left: 2px;
                  }
                }
              }

              .chart-analysis {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                margin-left: -12px;
                margin-right: -12px;

                .chart-analysis-item {
                  flex: 0 1 20%;

                  &:first-child .chart-analysis-item-wrap {
                    padding-left: 48px;
                  }

                  &:last-child .chart-analysis-item-wrap {
                    padding-right: 48px;
                  }

                  .chart-analysis-item-wrap {
                    padding: 14px 24px;
                  }

                  .chart-analysis-item-title {
                    font-size: 16px;
                    line-height: 24px;
                    font-weight: bold;
                    padding: 8px 0;
                  }

                  .chart-analysis-item-info {
                    width: 100%;
                    height: auto;
                    padding: 14px 0;
                    border: 2px solid #f0f2f5;
                    box-shadow: -2px 3px 5px -4px #262626, 2px 3px 5px -4px #262626;
                  }
                }
              }
            }
          }
        }

        .alarm-label-item {
          margin-bottom: 24px;
          display: flex;
          flex-wrap: nowrap;
          background-color: #f0f2f5;
          margin-left: -12px;
          margin-right: -12px;

          .alarm-label-item-box {
            flex: 0 1 50%;
            padding: 0 12px;

            &:last-child {
              margin-right: 0;
            }

            .alarm-label-item-box-bg {
              background-color: #fff;
              padding: 24px 0 0 24px;
              height: 100%;
            }

            .alarm-label-item-box-info {
              padding: 12px 12px 0;
              display: grid;

              .alarm-label-user-info-item {
                display: flex;
                flex-wrap: wrap;

                .alarm-label-user-box {
                  flex: auto;
                  width: 31%;
                  display: flex;
                  place-items: center;

                  .info {
                    display: flex;
                    flex-wrap: wrap;
                    text-align: left;
                    margin-left: 14px;

                    span {
                      flex: 0 1 109px;
                      line-height: 40px;
                    }

                    .tag-style {
                      flex: 100%;
                      display: flex;
                      place-items: center;

                      .el-tag {
                        flex: 0 1 16%;
                        margin: 0 75px;
                        line-height: 22px;
                        margin-left: 0;
                        text-align: center;

                        &:last-child {
                          margin-right: 0;
                        }
                      }
                    }
                  }

                  .alarm-label-user-box-item {
                    display: flex;
                    width: 100%;
                    place-items: center;

                    .el-icon-message-solid,
                    .el-icon-warning {
                      font-size: 28px;
                      color: #ff9900;
                    }

                    p {
                      display: inline-block;

                      span {
                        color: red;
                      }
                    }
                  }

                  &:last-child {
                    width: 27%;
                    margin-left: 28px;
                    display: grid;
                    text-align: left;
                  }

                  p {
                    margin-left: 8px;

                    span {
                      font-size: 28px;
                      font-weight: bold;
                    }
                  }

                  .avatar {
                    p {
                      width: 80px;
                      height: 46px;
                      line-height: 48px;
                      text-align: center;
                      background: url("../../assets/images/星标.png") no-repeat 100% 100%;
                      color: #ffffff;
                    }
                  }
                }
              }

              .emotional-list-item {
                margin: 35px 0 0;

                .emotional-list-item-table {
                  text-align: left;

                  .emotional-list-item-table-wrap {
                    height: 213px;
                    overflow: auto;

                    &::-webkit-scrollbar {
                      width: 6px;
                      height: 6px;
                      background-color: transparent;
                    }

                    &::-webkit-scrollbar-thumb {
                      background: rgba(255, 153, 0, .5);
                      border-radius: 2px;
                    }

                    &::-webkit-scrollbar-track {
                      background: transparent;
                    }

                    &::-webkit-scrollbar-button {
                      display: none;
                    }
                  }
                }
              }
            }

            .label-manage {
              text-align: left;
              padding-left: 0 !important;

              .label-manage-radio-wrap {
                display: flex;
                flex-wrap: nowrap;
                margin-left: -12px;
                margin-right: -12px;

                .label-manage-radio-wrap-item {
                  flex: 1 1 50%;

                  .label-manage-radio-group {
                    text-align: center;
                    margin-bottom: 14px;
                    padding-top: 24px;
                  }
                }
              }
            }
          }
        }

        .care-record-item {
          padding: 24px 24px 0;
          background-color: #fff;
        }
      }
    }
  }
}
